<template>
	<view class="uni_box">
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent">
			<Nheader></Nheader>
			<view class="done">
				<text class="zitit">{{ info.title }}</text>
				<view class="djshao">
					<view class="djitem">
						<image src="/static/home/zjinji.png" class="zjinji" mode=""></image>
						<text class="diname">{{info.author}}</text>
					</view>
					<view class="djitem tview">
						<image src="/static/home/zsj.png" class="zjinji" mode=""></image>
						<text class="diname">{{info.time}}</text>
					</view>
					<view class="djitem ml">
						<image src="/static/home/zyl.png" style="width: 20rpx;height: 15rpx;" class="zjinji" mode=""></image>
						<text class="diname">{{info.views}}</text>
					</view>
				</view>
				<view class="jshi" v-if="teacher">
					<view class="jshione">
						<view class="jsone">
							<image :src="teacher.teacher_image" class="zbotou" mode=""></image>
							<text class="xming txt">{{teacher.teacher_name}}</text>
							<view class="tepin">{{teacher.tag}}</view>
						</view>
						<text class="tjie">{{teacher.teacher_descript}}</text>
					</view>
					<view class="jright">
						<view class="jiaqun" v-if="teacher.qun_image" @click="getqun(teacher.qun_image)">
							<image src="/static/home/zlian.png" class="zlian" mode=""></image>
							<text class="quntit">加群交流</text>
						</view>
						<view class="jiaqun" v-if="teacher.wechat_image"  @click="getqun(teacher.wechat_image)">
							<image src="/static/home/zitousu.png" style="width: 36rpx;height: 34rpx;" class="zlian" mode=""></image>
							<text class="quntit">直接咨询</text>
						</view>
					</view>
				</view>
			</view>
			<view class="dtwo">
				<u-tabs :list="qitablist" :is-scroll="false" :current="qitabcurrent" @change="qitabchange" active-color="rgba(250, 78, 78, 1)" inactive-color="#CCCCCC"></u-tabs>
			</view>
			<view class="oneview" v-if="qitabcurrent == 0">
				<view class="dthree">
					<view class="tuwen">
						<u-parse :html="info.content" :tag-style="style"></u-parse>
					</view>
				</view>
				<view class="yinview"></view>
				<!-- 学习交流 -->
				<view class="xuejiao" v-if="jiaoliudata">
					<image :src="jiaoliudata.image" class="zima" mode=""></image>
					<view class="xueright">
						<view class="xueone">
							<text class="xueonetit">{{jiaoliudata.title}}</text>
							<text class="xueonemiao">{{jiaoliudata.descript}}</text>
						</view>
						<view class="xuelist">
							<view class="xueitem" v-for="(item,index) in jiaoliudata.list" :key="index">
								/{{item.title}}
							</view>
						</view>
					</view>
				</view>

				<!-- 热门文章 -->
				<view class="rewen" v-if="remendata">
					<text class="retit">热门文章推荐</text>
					<view class="qilist plr">
						<view class="qiitem" v-for="(item,index) in remendata" :key="index" @click="gettui(item)">{{item.title}}</view>
					</view>
				</view>

				<view class="tithreeview">
					<view class="lview">
						<image src="/static/newlogo.png" class="newlogo" mode="widthFix"></image>
					</view>
					<view class="tilist">
						<view class="tiitem">
							<image src="/static/tiku/tione.png" class="tioneicon" mode=""></image>
							<view class="tiright">
								<text class="tiname">行业要闻</text>
								<text class="timiao">热点资讯全方位解读</text>
							</view>
						</view>
						<view class="tiitem">
							<image src="/static/tiku/titwo.png" class="tioneicon" mode=""></image>
							<view class="tiright">
								<text class="tiname">报考指南</text>
								<text class="timiao">一站式报考指导</text>
							</view>
						</view>
						<view class="tiitem">
							<image src="/static/tiku/tithree.png" class="tioneicon" mode=""></image>
							<view class="tiright">
								<text class="tiname">在线题库</text>
								<text class="timiao">真题在线免费练</text>
							</view>
						</view>
						<view class="tiitem">
							<image src="/static/tiku/tione.png" class="tioneicon" mode=""></image>
							<view class="tiright">
								<text class="tiname">报名/查分</text>
								<text class="timiao">报名查分抢先一步</text>
							</view>
						</view>
					</view>

					<view class="tibtn">一键下载融跃教育APP</view>
				</view>
			</view>

			<!-- 报考指南 -->
			<view class="twoview"  v-if="qitabcurrent == 1">
				<view class="zhione">
					<view class="zhibiao">
						<text class="zbiao">{{ baoinfo.cate_name }}</text>
						<text class="kaoview">{{ baoinfo.tip }}</text>
					</view>
					<view class="xji">
						<text class="xtit">证书星级</text>
						<u-rate :count="count" v-model="baoinfo.star" size="28"></u-rate>
					</view>
					<view class="jukao">
						<text class="jutit">{{baoinfo.title}}<text class="junum">{{ baoinfo.day }}</text>天</text>
					</view>
					<view class="" style="margin-top: 30rpx;">
						<u-parse :html="baoinfo.content" :tag-style="style"></u-parse>
					</view>
				</view>
				<view class="shaiview">
					<view class="shaiitem" v-for="(item,index) in baokaodata" :key="index">
						<view class="shaione">
							<text class="shu"></text>
							<text class="shaitit">{{item.title}}</text>
						</view>
						
						<view class="shailist">
							<!-- sactive -->
							<view class="shais" v-for="(i,ind) in item.article_list" :key="ind" @click="gettui(i)">{{i.title}}</view>
						</view>
					</view>
				</view>
			</view>
			

			
		</view>

		<!-- 加群弹窗 -->
		<view class="st">
			<u-popup v-model="stshow" mode="center" @close="stshow=false" width="80%" :closeable="true">
				<view class="stpop">
					<!-- <view class="chaview">
						<image class="macha" src="@/pages_subject/static/img/macha.png" mode="" />
					</view> -->
					<image class="mapop" mode="" :src="taninfo.image" />
					<!-- <text class="matit">注：{{taninfo.title}}</text> -->
				</view>
			</u-popup>
		</view>
		<!-- 底部导航 -->
		<!-- <Tabbar :current="3"></Tabbar> -->
</view>
</template>

<script>
export default {
	data() {
		return {
			nums:'12345678',
			qitablist:[
				{name:'图文详情',id:1},
				{name:'报考指南',id:1},
			],
			count: 5,
			value: 5,
			qitabcurrent:0,
			style: {
					img: 'width:max-width:100%;height:auto;pointer-events: none;'
			},
			info:{
				content:''
			},
			id:'',
			teacher:{},
			taninfo:{
				image:'',
				title:''
			},
			stshow:false,
			remendata:[],
			type_id:'',
			jiaoliudata:{},
			baokaodata:{},
			baoinfo:{}
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {

	},
	async onLoad(option) {
		this.id = option.id
		if(option.type_id){
			this.type_id = option.type_id
		}
		this.getDetail()
		this.fgetArticleListForTui();//热门推荐
		this.fgetQunCard();//获取学习交流
		this.fgetBaokao();//报考指南
	},
	async onShow() {
	},
	onReachBottom: function () {
	},
	methods: {
		async getDetail(){
			let res = await this.$u.api.getArticleInfo({
				id:this.id
			});
			this.info = res
			this.teacher = res.teacher
		},
		qitabchange(e){
			this.qitabcurrent = e
		},
		getqun(image){
			this.taninfo.image = image
			this.stshow = true
		},
		async fgetArticleListForTui(){
			let res = await this.$u.api.getArticleListForTui({
				cate_id:this.id,
				type_id:this.type_id
			});
			this.remendata = res
		},
		async fgetQunCard(){
			let res = await this.$u.api.getQunCard({
				cate_id:this.id,
				type_id:this.type_id
			});
			this.jiaoliudata = res
		},
		async fgetBaokao(){
			let res = await this.$u.api.getBaokao({
				cate_id:this.id,
				type_id:this.type_id
			});
			this.baokaodata = res.list
			this.baoinfo = res.info
		},
		gettui(item){
			this.navrouter("/pages/tabbar/ZiXunDetail?id="+item.id+'&type_id='+this.type_id);
		}
		
	}
}
</script>

<style lang="scss" scoped>

.newcontent {
	min-height: 100vh;
	padding-bottom: 130rpx;
	background-color: #fff;
	.done{
		padding: 30rpx;
		.zitit{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 42rpx;
			color: #111111;
		}
		.djshao{
			margin: 40rpx 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			// justify-content: space-between;
			.djitem{
				display: flex;
				flex-direction: row;
				align-items: center;
				.zjinji{
					margin-right: 10rpx;
					width: 18rpx;
					height: 18rpx;
				}
				.diname{
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}
			}
			.tview{
				margin-left: 80rpx;
			}
		}
		.jshi{
			// background: #FFFFFF;
			// border-radius: 10rpx;
			// border: 1rpx solid #eee;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
			border-radius: 10rpx;
			border: 1rpx solid #EEEEEE;
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			.jshione{
				width: 76%;
				display: flex;
				flex-direction: column;
				.jsone{
					display: flex;
					flex-direction: row;
					align-items: center;
					.zbotou{
						width: 56rpx;
						border-radius: 50%;
						height: 56rpx;
						margin-right: 20rpx;
					}
					.xming{
						max-width: 70%;
						display: inline-block;
						font-family: PingFangSC;
						font-weight: bold;
						font-size: 28rpx;
						color: #111111;
					}
					.tepin{
						padding: 5rpx 10rpx;
						background: #FEF6F2;
						border-radius: 4rpx;
						border: 1px solid #FFDDCC;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FA7938;
						margin-left: 20rpx;
						display: inline-block;
					}

				}
				.tjie{
					display: block;
					margin-top: 25rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #555555;
				}
			}
			.jright{
				width: 24%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.jiaqun{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-bottom: 30rpx;
					.zlian{
						width: 42rpx;
						height: 32rpx;
						margin-bottom: 10rpx;
					}
					.quntit{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 22rpx;
						color: #555555;
					}

				}
				.jiaqun:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	.dtwo{
		margin: 0 30rpx;
		border-bottom: 1rpx solid #eee;
	}
	.yinview{
		height: 30rpx;
		background: #F6F7FB;
		position: relative;
	}
	.xuejiao{
		margin: 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
		border-radius: 10rpx;
		border: 1rpx solid #EEEEEE;
		display: flex;
		flex-direction: row;
		align-items: center;
		.zima{
			width: 140rpx;
			height: 140rpx;
			margin-right: 30rpx;
		}
		.xueright{
			flex: 1;
			display: flex;
			flex-direction: column;
			.xueone{
				display: flex;
				flex-direction: row;
				align-items: center;
				.xueonetit{
					font-family: PingFangSC;
					font-weight: bold;
					font-size: 28rpx;
					color: #111111;
				}
				.xueonemiao{
					display: inline-block;
					margin-left: 10rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}
			}
			.xuelist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 30rpx;
				.xueitem{
					background-color: rgba(254, 246, 242, 1);
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FA7938;
					padding: 10rpx 20rpx;
					margin: 0 6rpx 20rpx 0;
				}
			}
		}
	}
	.rewen{
		margin:50rpx 30rpx 30rpx;
		.retit{
			display: block;
			text-align: center;
			font-family: PingFangSC;
			font-weight: bold;
			font-size: 30rpx;
			color: #111111;
			margin-bottom: 40rpx;
		}
		.qilist{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 20rpx;
			.qiitem{
				padding: 20rpx 60rpx;
				background: #F8F8F8;
				border-radius: 8rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 22rpx;
				color: #333333;
				margin: 0 30rpx 30rpx 0;
			}
		}
	}
	.dthree{
		margin:  30rpx;
		.tuwen{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #555555;
		}
	}
	.tioneview{
		.tibg{
			position: relative;
			height: 320rpx;
			width: 100%;
		}
	}
	.zhione{
		display: flex;
		flex-direction: column;
		padding: 45rpx 30rpx;
		.zhibiao{
			display: flex;
			flex-direction: row;
			align-items: center;
			.zbiao{
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 42rpx;
				color: #111111;
			}
			.kaoview{
				padding: 7rpx 10rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
				background: #F8F8F8;
				border-radius: 4rpx;
				border: 1px solid #EEEEEE;
				margin-left: 20rpx;
			}
		}
		.xji{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 30rpx 0 40rpx;
			.xtit{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FA4E4E;
				display: inline-block;
				margin-right:10rpx;
			}
		}
		.jukao{
			height: 70rpx;
			background: #F8F8F8;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			.jutit{
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #FA4E4E;
			}
			.junum{
				display: inline-block;
				margin: 0 8rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #FA4E4E;
			}
		}
	}
	.titwoview{
		margin: -120rpx 30rpx 48rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 16rpx solid rgba(255, 91, 0, 0.36);
		position: relative;
		height: 240rpx;
		padding: 20rpx 35rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		// background: #FFFFFF;
		box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(255,91,0,0.36);
		// border-radius: 14rpx;
		.tibiao{
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #333;
			display: block;
			text-align: center;
		}
		.tishu{
			display: flex;
			flex-direction: row;
			margin-top: 37rpx;
			.shuitem{
				position: relative;
				width: 60rpx;
				height: 84rpx;
				margin: 0 8rpx;
				.tiicon{
					position: absolute;
					width: 100%;
					height: 100%;
				}
				.shuview{
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: DIN;
					font-weight: bold;
					font-size: 56rpx;
					color: #B0680C;
				}
			}
		}
	}

	.shaiview{
		padding: 25rpx 0rpx;
		// background-color: #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		width: 100%;
		// z-index: 100;
		.shaiitem{
			margin-bottom: 20rpx;
			.shaione{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-bottom: 25rpx;
				.shu{
					display: inline-block;
					width: 6rpx;
					height: 28rpx;
					margin-right: 25rpx;
					background: #FA4E4E;
				}
			}
			.shaitit{
				display: inline-block;
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
			}
			.shailist{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				padding: 0 30rpx;
				.shais{
					width: 31%;
					margin-right: 2%;
					height: 64rpx;
					background: #F8F8F8;
					border-radius: 32rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 25rpx;
					font-weight: 500;
					font-size: 22rpx;
					color: #333333;
				}
				.sactive{
					background: #FFF0F0;
					color: #FA4E4E;
				}

			}
		}
		.shaiitem:last-child{
			margin-bottom: 0 !important;
		}
		
		.chongview{
			display: flex;
			flex-direction: row;
			align-items: center;

			.czhi{
				width: 48%;
				height: 80rpx;
				background: #F8F8F8;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #111111;
			}
			.que{
				width: 48%;
				height: 80rpx;
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
	.tithreeview{
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		padding: 0 30rpx;
		.lview{
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 40rpx;
			.newlogo{
				width: 220rpx;
			}
		}
		.tilist{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			.tiitem{
				padding: 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
				border-radius: 10rpx;
				width: 48%;
				margin-right: 1%;
				margin-bottom: 30rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				.tioneicon{
					width: 64rpx;
					height: 64rpx;
					margin-right: 20rpx;

				}
				.tiright{
					display: flex;
					flex-direction: column;
					.tiname{
						font-family: PingFangSC;
						font-weight: bold;
						font-size: 24rpx;
						color: #111111;
					}
					.timiao{
						display: inline-block;
						margin-top: 14rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
					}
				}
			}
			.tiitem:nth-child(even){
				margin-left: auto;
			}
		}
	}
	.tibtn{
		height: 80rpx;
		background: linear-gradient(-90deg, #FA4E4E, #FD894F);
		border-radius: 40rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}
}
.st{
	/deep/.u-mode-center-box{
		background-color: transparent;
	}
	.stpop{
		background-color: #fff;
		height: 550rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: relative;
		.mapop{
			width: 300rpx;
			height: 300rpx;
			margin-bottom: 50rpx;
		}
		.matit{
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 22rpx;
			color: #FA7938;
		}
		.chaview{
			position: absolute;
			right: 0rpx;
			top: 0rpx;
			width: 40rpx;
			height: 40rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(202,205,217,0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			// position: relative;
			.macha{
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
	}
</style>
